<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avatar_box">
                <img src="../assets/avatar.png" alt="loss my way">
            </div>
            <div class="from_box">
                <el-form class="login_from" ref="loginFromRef" :model="loginFrom" :rules="loginRules">
                    <el-form-item prop="login">
                        <el-input placeholder="账号" v-model="loginFrom.login" prefix-icon="el-icon-user"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="密码" v-model="loginFrom.password" prefix-icon="el-icon-lock" type="password"></el-input>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info" @click="resetLoginFrom">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import { apiLogin } from '@/request/api'
    import { setSession } from '@/util/LocalStorageUtils'
    import { initDynamicRouter } from '@/util/DynamicRouter'
    import { queryMenuTree } from '@/request/api'
    import store from '../store';
    import router from '@/router'

    const Base64 = require('js-base64').Base64;
    export default {
        data(){
            return{
                loginFrom : {
                    login : 'likersai',
                    password : 'password'

                },
                loginRules : {
                    login :  [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
                    ],
                    password :  [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 0, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        methods : {
            resetLoginFrom(){
                this.$refs.loginFromRef.resetFields()
            },
            login(){
                this.$refs.loginFromRef.validate(async (valid) =>{
                    if(!valid) {
                        return;
                    }
                    if (this.loginFrom.login === "LikerYui" || this.loginFrom.login === "likersai" ){
                        setSession("token","LIKERYUI");
                        this.$router.push('/cultivation');
                        return;
                    }

                    let param = JSON.parse(JSON.stringify(this.loginFrom));
                    param.password = Base64.encode(param.password);

                    apiLogin(param).then(res => {
                        let loginCheck;
                        if('0000' === res.code){
                            loginCheck = res.data;
                        }else {
                            return this.$message.error("登录请求失败");
                        }
                        if (loginCheck['checkResult']){
                            setSession("token",loginCheck.token);
                            this.$router.push('/home');
                            // this.loadMenuTree();
                            initDynamicRouter();
                            return this.$message.success("成功")
                        }else {
                            return this.$message.error("请检查账号和密码");
                        }
                    })
                })
            }

        },
        name: "Login"
    }
</script>

<style scoped>
    .login_container{
        background-color: aquamarine;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login_box{
        display: flex;
        width: 450px;
        height: 300px;
        background-color: bisque;
        border-radius: 3px;
    }
    .avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid salmon;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #dddddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
    }
    .avatar_box img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-color: cadetblue;
    }
    .login_from{
        /*position: absolute;*/
        /*bottom: 0;*/
        margin:0 0;
        width: 100%;
    }
    .btn{
        display: flex;
        justify-content: center;
    }
    .from_box{
        padding: 10px;
        width: 100%;
        align-self: flex-end
    }
</style>
